<template>
  <el-container>
    <el-main class="tablem">
      <div class="border">
        <!-- 菜品 -->
        <div class="tablepad">
          <el-checkbox
            v-model="checkList"
            :label="1"
            @change="changeclassesState"
            >菜品</el-checkbox
          >
          <template v-if="this.classeState">
            <el-checkbox-group v-model="checkList">
              <el-checkbox
                v-for="type in this.classes"
                :label="type[1]"
                :key="type[1]"
                >{{ type[0] }}</el-checkbox
              >
            </el-checkbox-group>
          </template>
          <template v-else>
            <el-checkbox-group v-model="checkList">
              <el-checkbox
                disabled
                v-for="type in this.classes"
                :label="type[1]"
                :key="type[1]"
                >{{ type[0] }}</el-checkbox
              >
            </el-checkbox-group>
          </template>
        </div>
        <!-- 库存 -->
        <div class="tablepad">
          <el-checkbox
            v-model="checkList"
            :label="18"
            @change="changeinventoryState"
            >库存</el-checkbox
          >
          <template v-if="this.inventoryState">
            <el-checkbox-group v-model="checkList">
              <el-checkbox
                v-for="type in this.inventory"
                :label="type[1]"
                :key="type[1]"
                >{{ type[0] }}</el-checkbox
              >
            </el-checkbox-group>
          </template>
          <template v-else>
            <el-checkbox-group v-model="checkList">
              <el-checkbox
                disabled
                v-for="type in this.inventory"
                :label="type[1]"
                :key="type[1]"
                >{{ type[0] }}</el-checkbox
              >
            </el-checkbox-group>
          </template>
        </div>
        <!-- 促销 -->
        <div class="tablepad">
          <el-checkbox
            v-model="checkList"
            :label="21"
            @change="changepromotionState"
            >促销</el-checkbox
          >
          <template v-if="this.promotionState">
            <el-checkbox-group v-model="checkList">
              <el-checkbox
                v-for="type in this.promotion"
                :label="type[1]"
                :key="type[1]"
                >{{ type[0] }}</el-checkbox
              >
            </el-checkbox-group>
          </template>
          <template v-else>
            <el-checkbox-group v-model="checkList">
              <el-checkbox
                disabled
                v-for="type in this.promotion"
                :label="type[1]"
                :key="type[1]"
                >{{ type[0] }}</el-checkbox
              >
            </el-checkbox-group>
          </template>
        </div>
        <!-- 订单 -->
        <div class="tablepad">
          <el-checkbox
            v-model="checkList"
            :label="26"
            @change="changeorderState"
            >订单</el-checkbox
          >
          <template v-if="this.orderState">
            <el-checkbox-group v-model="checkList">
              <el-checkbox
                v-for="type in this.order"
                :label="type[1]"
                :key="type[1]"
                >{{ type[0] }}</el-checkbox
              >
            </el-checkbox-group>
          </template>
          <template v-else>
            <el-checkbox-group v-model="checkList">
              <el-checkbox
                disabled
                v-for="type in this.order"
                :label="type[1]"
                :key="type[1]"
                >{{ type[0] }}</el-checkbox
              >
            </el-checkbox-group>
          </template>
        </div>
        <!-- 报表 -->
        <div class="tablepad">
          <el-checkbox v-model="checkList" :label="29" @change="changeformState"
            >报表</el-checkbox
          >
          <template v-if="this.formState">
            <el-checkbox-group v-model="checkList">
              <el-checkbox
                v-for="type in this.form"
                :label="type[1]"
                :key="type[1]"
                >{{ type[0] }}</el-checkbox
              >
            </el-checkbox-group>
          </template>
          <template v-else>
            <el-checkbox-group v-model="checkList">
              <el-checkbox
                disabled
                v-for="type in this.form"
                :label="type[1]"
                :key="type[1]"
                >{{ type[0] }}</el-checkbox
              >
            </el-checkbox-group>
          </template>
        </div>
        <!-- 系统 -->
        <div class="tablepad">
          <el-checkbox
            v-model="checkList"
            :label="35"
            @change="changexitongState"
            >系统</el-checkbox
          >
          <template v-if="this.xitongState">
            <el-checkbox-group v-model="checkList">
              <el-checkbox
                v-for="type in this.xitong"
                :label="type[1]"
                :key="type[1]"
                >{{ type[0] }}</el-checkbox
              >
            </el-checkbox-group>
          </template>
          <template v-else>
            <el-checkbox-group v-model="checkList">
              <el-checkbox
                disabled
                v-for="type in this.xitong"
                :label="type[1]"
                :key="type[1]"
                >{{ type[0] }}</el-checkbox
              >
            </el-checkbox-group>
          </template>
        </div>
        <!-- 按钮 -->
        <div class="tablepadbtn">
          <el-button type="primary" @click="back">取消</el-button>、
          <el-button type="warning" @click="submit">修改</el-button>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      classeState: false,
      inventoryState: false,
      promotionState: false,
      orderState: false,
      formState: false,
      xitongState: false,
      classes: [],
      form: [],
      promotion: [],
      order: [],
      inventory: [],
      xitong: [],
      checkList: [],
      formcheckList: [],
      table: [],
      // 菜品
    };
  },
  methods: {
    back() {
      this.$router.push("/main/position");
    },
    changeclassesState(v) {
      if (v == true) {
        this.classeState = true;
      } else {
        this.classeState = false;
      }
    },
    changeinventoryState(v) {
      if (v == true) {
        this.inventoryState = true;
      } else {
        this.inventoryState = false;
      }
    },
    changepromotionState(v) {
      if (v == true) {
        this.promotionState = true;
      } else {
        this.promotionState = false;
      }
    },
    changeorderState(v) {
      if (v == true) {
        this.orderState = true;
      } else {
        this.orderState = false;
      }
    },
    changeformState(v) {
      if (v == true) {
        this.formState = true;
      } else {
        this.formState = false;
      }
    },
    changexitongState(v) {
      if (v == true) {
        this.xitongState = true;
      } else {
        this.xitongState = false;
      }
    },
    getid() {
      let id = localStorage.getItem("id");
      // console.log(id);
      this.axios({
        method: "get",
        url: "/role/" + id,
      }).then((res) => {
        console.log(res.data.data);
        this.table = res.data.data;
        for (
          let i = 0;
          i < res.data.data.permissionIds.split(",").length;
          i++
        ) {
          this.checkList.push(
            parseInt(res.data.data.permissionIds.split(",")[i])
          );
        }
        console.log(this.checkList);
      });
    },
    submit() {
      this.$notify({
          title: '成功',
          message: '修改权限成功',
          type: 'success'
      });
      console.log(this.checkList);
      let a=this.checkList.toString()
      this.table.permissionIds = a;
      console.log(this.table);
      this.axios({
        method: "post",
        url: "/role/update",
        data:this.table
      })
      .then((res)=>{
        console.log(res);
        this.back()
      })
    },
  },
  created() {
    this.getid();
    this.axios({
      method: "post",
      url: "/permission/list",
      data: {
        limit: 100,
        page: 1,
        startIndex: 0,
      },
    }).then((res) => {
      console.log(res);
      console.log(res.data.data);
      // console.log(res.data.data.level2.slice(7, 10));
      res.data.data.level2.slice(0, 5).forEach((item, i) => {
        this.classes.push([item.permissionName, item.id]);
      });
      res.data.data.level2.slice(5, 7).forEach((item, i) => {
        this.inventory.push([item.permissionName, item.id]);
      });
      res.data.data.level2.slice(7, 11).forEach((item, i) => {
        this.promotion.push([item.permissionName, item.id]);
      });
      res.data.data.level2.slice(11, 12).forEach((item, i) => {
        this.order.push([item.permissionName, item.id]);
      });
      res.data.data.level2.slice(12, 16).forEach((item, i) => {
        this.form.push([item.permissionName, item.id]);
      });
      res.data.data.level2.slice(16,24).forEach((item, i) => {
        this.xitong.push([item.permissionName, item.id]);
      });
      // console.log(this.classes);
    });
  },
};
</script>

<style lang='less' scoped>
.tablem {
  margin-top: 35px;
}
.border {
  padding: 10px;
  border: rgb(207, 205, 205) solid 1px;
  background-color: white;
}
.tablepad {
  font-size: 1.4rem;
  margin: 5px;
  padding: 5px;
  background-color: #f5f9fc;
}
.tablepadbtn {
  font-size: 1.4rem;
  margin: 5px;
  padding: 5px;
  text-align: center;
  background-color: #f5f9fc;
}
</style>